本文件由FirstUI授权予秦皇岛玄铁网络科技（手机号： 13661 0 432      0 4，身份证尾号：2FJF80）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
<template>
<view class="fui-wrap">
    <view class="fui-container">
        <!-- 加载状态提示 -->
        <view v-show="!showContent || !initialLoadCompleted" class="loading-container">
            <view class="loading-text">加载中...</view>
        </view>
        
        <!-- 动态渲染swiper，确保current值已经正确设置 -->
        <swiper 
            v-if="showContent && postList.length > 0 && initialLoadCompleted"
            :current="currentIndex"
            @change="onSwiperChange"
            @touchstart="onTouchStart"
            @touchend="onTouchEnd"
            vertical="true"
            :circular="false"
            :disable-touch="false"
            :duration="0"
            :interval="0"
            :autoplay="false"
            :skip-hidden-item-layout="true"
            style="height:100vh;"
            class="post-swiper">
            <swiper-item v-for="(item,index) in postList" :key="item.id" :id="`post-${item.id}`" class="post-swiper-item">
                <scroll-view scroll-y="true" style="height: 100vh;" class="post-content-scroll">
                    <view class="fui-page__spacing user-info">
                        <fui-lazyload @tap="toUser" :data-id="item.user.uid" size="" radius="96" class="aaaa" marginBottom="0" :width="75" :height="75" :src="cdnHost+item.user.head" mode="aspectFill">

                        </fui-lazyload>
                        <label v-text="item.user.nick"></label>
                    </view>
                <fui-swiper-dot :items="item.urls" :current="item.postCurrent">
                    <!-- 调试信息：显示当前指示点状态 -->
                    <!-- <text style="color: red; font-size: 12px; position: absolute; top: 0; left: 0; z-index: 999;">{{item.id}} - {{item.postCurrent}}/{{item.urls.length}}</text> -->
                    <view class="fui-cardswiper__box">
                        <swiper 
                            :current="item.postCurrent" 
                            class="fui-card__swiper-wrap" 
                            :style="{height: mediaHeight}" 
                            :data-id="item.id" 
                            @change="changeMedia" 
                            :indicator-dots="false" 
                            :interval="5000" 
                            :duration="150">
                            <swiper-item v-for="(url, index) in item.urls" :key="index" class="fui-cs__swiper-item">
                                <view :id="generateId(item.id, index)" class="fui-cardswiper__item">
                                    <image lazy-load v-if="url.indexOf('.mp4') == -1" :src="item.urls[0]?.startsWith('http') ? item.urls[0] : cdnHost + item.urls[0]" class="fui-cardswiper__img" :style="{height: mediaHeight}"></image>
                                    <video v-else ref="video" :id="generateId(item.id, index) + '-video'" :style="{ width: screenWidth, height: mediaHeight }" :poster="cdnHost + item.urls[index - 1]" :src="cdnHost + url" :controls="true" :autoplay="false" :loop="true" :muted="false" :enable-hardware-acceleration="true" :show-fullscreen-btn="false" :show-play-btn="true" :show-center-play-btn="true" :show-loading="true" direction="0" objectFit="cover" enable-play-gesture="true" @fullscreenchange="">
                                    </video>
                                </view>
                            </swiper-item>
                        </swiper>
                    </view>
                </fui-swiper-dot>
                <view class="fui-function">
                    <view class="fui-icon__item" @tap="likePost" :data-id="item.id">
                        <fui-icon :name="item.liked?'like-fill':'like'"></fui-icon>
                        <view class="fui-icon__name" v-if="item.likeCount != 0">{{formatNumber(item.likeCount)}}</view>
                    </view>
                    <view class="fui-icon__item" @tap="downPostWithChoice" :data-id="item.id">
                        <fui-icon name="pulldown"></fui-icon>
                    </view>
                    <view class="fui-icon__item">
                         <button  class="content content-share" open-type="share" :data-id="item.id" ><fui-icon name="share"></fui-icon></button>
                    </view>
                    <view class="fui-icon__item" @tap="collectPost" :data-id="item.id">
                        <fui-icon :name="item.collected?'star-fill':'star'"></fui-icon>
                    </view>
                </view>
                <view class="fui-oh__wrap">
                    <view @longpress="copyTitle(item)">
                        <fui-overflow-hidden  :size="28" :rows="item.hideTitle?5:1000">
                            <view v-html="item.title"></view>
                            <view v-html="getDisplayText(item.content)"></view>
                            <view class="fui-btn__text" :class="{'fui-visible':!item.hideTitle}" :data-id="item.id" @tap="changeShowTitle">{{item.hideTitle?'展开':'收起'}}</view>
                            <view class="fui-btn__text copy-btn" @tap="copyTitle(item)">复制</view>
                        </fui-overflow-hidden>
                    </view>
                </view>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</view>
</template>

<script  lang="ts" src="./post.ts"/>

<style>
.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    z-index: 9999;
}

.loading-text {
    color: #fff;
    font-size: 16px;
}

.aaaa {
    margin-bottom: 0px;
}

.fui-container {
    overflow: hidden;
    background-color: white;
}

.fui-list {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.fui-page__bd:first-child {
    padding-top: 30rpx;
    border: 1rpx solid rgba(226, 225, 225, 0.3);
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
}

.fui-list--item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-right: 24rpx;
    /* border-radius: 66rpx; */
}

.fui-section__title {
    margin-left: 32rpx;
}

.fui-list--item:first-child {
    margin-left: 32rpx;
}

.fui-page__bd {
    padding-bottom: 30rpx;
}

.fui-page__bd.fui-page__spacing {
    padding-left: 0rpx;
    padding-right: 0rpx;
}

.fui-lazyload__wrap {
    align-items: center;
}

.user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20rpx;
    /* margin-left: rpx; */
}

.user-info label {
    margin-left: 20rpx;
    font-size: 28rpx;
    width: 60%;
}

::v-deep .user-head .fui-avatar__wrap {
    position: relative;
    display: inline-table;
    overflow: none !important;
    flex-shrink: 0;
    z-index: 3;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* border: white !important; */
    /* border: 2px solid #dbe4e6 !important; */
    width: 85px !important;
    height: 85px !important;
    border-radius: 92px;
}

::v-deep .user-head .fui-avatar__wrap::before {
    content: '';
    position: absolute;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, orange, rgb(241, 17, 122));
    /* 红色到橙色的渐变 */
    border-radius: 50%;
    /* 确保圆角效果一致 */
    z-index: -1;
}

::v-deep .user-head .fui-avatar__size-large {

    width: 139rpx !important;
    height: 139rpx !important;
    /* border-radius: 100rpx; */
}

::v-deep .user-head .fui-avatar__wrap .fui-avatar__img {
    border: 3px solid white;
    width: 166rpx !important;
    height: 166rpx !important;
    flex: none;
}

.fui-cardswiper__box {
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: center;
}

.fui-card__swiper-wrap {
    width: 100%;
    height: 720rpx;
}

.fui-cs__swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.fui-cardswiper__item {
    width: 100%;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    transition-timing-function: linear;
    transition-duration: .1s;
    transition-property: transform;
    height: auto;
    background: #f8f8f8;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.fui-cardswiper__img {
    width: 100%;
    /* height: 750rpx; */
    display: block;
}

.fui-function {
    margin-top: 25rpx;
    margin-bottom: 20rpx;
    width: 100%;
    display: flex;
    margin-left: 32rpx;
    height: 50rpx;
    line-height: 32rpx;
}

.fui-icon__item {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    margin-right: 20rpx;
}

.fui-icon {
    margin-right: 5px;
    /* 可选：为图标和文本之间添加一些间距 */
}

.fui-icon__item:last-child {
    margin-left: auto;
    /* 将最后一个 item 推到右边 */
    margin-right: 32rpx;
    /* 右边距为 32rpx */
}

.fui-oh__wrap {
    width: 100%;
    padding: 28rpx 32rpx;
    padding-top: 0rpx;
    box-sizing: border-box;
    background: #FFFFFF;
}

.fui-overflow__hidden-wrap {
    line-height: 1.5;
}

/* 确保v-html中的br标签正常工作 */
::v-deep .fui-overflow__hidden {
    white-space: normal !important;
}

::v-deep .fui-overflow__hidden br {
    display: block !important;
    content: "" !important;
    margin-top: 0.5em !important;
}

.fui-btn__text {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: #fff;
    color: rgb(66 66 101);
    cursor: pointer;
    padding-left: 8rpx;
}

.fui-btn__text.copy-btn {
    right: 60rpx; /* 复制按钮位于收起按钮左边 */
}

.fui-btn__text::after {
    content: '';
    position: absolute;
    top: 0;
    left: -48rpx;
    height: 100%;
    width: 48rpx;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 10%, #fff);
    pointer-events: none;
    color: #666680;
}

.fui-visible {
    display: inline-block;
    position: static;
    padding-left: 0;
}

.fui-visible::after {
    background: none;
}

.content-share{
    height: 47px;
    line-height: 47px;
}

.post-swiper {
    width: 100%;
    height: 100vh;
}

.post-swiper-item {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.post-content-scroll {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
}

.post-swiper-item .fui-page__spacing {
    padding: 20rpx 32rpx;
    flex-shrink: 0;
}

.post-swiper-item .fui-cardswiper__box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

.post-swiper-item .fui-card__swiper-wrap {
    width: 100%;
    height: 100%;
}

.post-swiper-item .fui-oh__wrap {
    flex-shrink: 0;
    width: 100%;
    padding: 28rpx 32rpx;
    padding-top: 0rpx;
    box-sizing: border-box;
    background: #FFFFFF;
}
</style>
